<template>
  <div>
    <el-date-picker
      v-model="times"
      @change="changePicker"
      type="daterange"
      align="right"
      unlink-panels
      :start-placeholder="$t('common.startDate')"
      :end-placeholder="$t('common.endDate')"
      size="small"
      class="mgr10 mgb10"
      :picker-options="pickerOptions"
      value-format="yyyy-MM-dd"
      ref="datePicker"
      :clearable="false"
      @click="this.minDate = null"
    >
    </el-date-picker>
    <div style="display: inline-block">
      <template v-if="dateType === 1">
        <el-button class="mgb10" :disabled="disdisabled" :type="dayType === 0 ? 'primary' : ''" @click="chooseDate(0)">{{ $t('common.today') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="dayType === 7 ? 'primary' : ''" @click="chooseDate(7)">{{ $t('common.last7Days') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="monthType === 1 ? 'primary' : ''" @click="chooseMonthType(1)">{{ $t('common.thisMonth') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="monthType === 2 ? 'primary' : ''" @click="chooseMonthType(2)">{{ $t('common.lastMonth') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="dayType === 30 ? 'primary' : ''" @click="chooseDate(30)">{{ $t('common.last30Days') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="dayType === 60 ? 'primary' : ''" @click="chooseDate(60)">{{ $t('common.last60Days') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="dayType === 90 ? 'primary' : ''" @click="chooseDate(90)">{{ $t('common.last90Days') }}</el-button>
      </template>
      <template v-if="dateType === 2">
        <el-button class="mgb10" :disabled="disdisabled" :type="monthType === 1 ? 'primary' : ''" @click="chooseMonthType(1)">{{ $t('common.thisMonth') }}</el-button>
        <el-button class="mgb10" :disabled="disdisabled" :type="monthType === 2 ? 'primary' : ''" @click="chooseMonthType(2)">{{ $t('common.lastMonth') }}</el-button>
      </template>

    </div>
  </div>
</template>

<script>
import {getSystemDate, getTargetDate, getTargetTimezone} from "@/utils/common";

export default {
  name: "DiyDate",
  props:{
    setDayType: {
      type: Number,
      default: 7,
    },
    // 日期模式 1：天模式 2：月模式
    dateType: {
      type: Number,
      default: 1,
    },
    setMonthType: {
      type: Number,
      default: 1,
    },
    setApiTimes: {
      type: Number,
      default: 0,
    },
    disdisabled: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.apiTimes = this.setApiTimes
    this.dayType = this.setDayType
    if(this.dateType === 1){
      this.chooseDate(this.dayType)
    }else{
      this.chooseMonthType(this.setMonthType)
    }
  },
  data(){
    return {
      minDate: null,
      pickerOptions: {
        disabledDate: time=>{
          if(time.getTime() > Date.now()){
            return true // 选当前时间之前的时间
          }
          if(!this.minDate){
            return false;
          }
          let minTime = this.minDate.getTime()
          let timeTime = time.getTime()
          let diffDays = Math.abs(minTime - timeTime)
          diffDays = diffDays / (1000 * 60 * 60 *24)
          return diffDays > 365;
        },
        onPick: pick =>{
          if(pick.minDate){
            this.minDate = pick.minDate;
          }
        }

      },

      times: [],
      dayType: 7,
      monthType: 1,
      apiTimes: 0,
    }
  },
  watch: {
    times(){
      this.$emit('input',this.times)
      if(this.apiTimes >= 1){
        this.$emit('change',this.times)
      }
      this.apiTimes++;

    }
  },
  methods: {
    changePicker(){
      this.dayType = -1
    },
    chooseDate(day){
      const end = getSystemDate();
      const start = getSystemDate();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
      const startDate = this.formatDate(start)
      const endDate = this.formatDate(end)
      this.times = [startDate,endDate]
      this.dayType = day
      this.monthType = -1
    },
    formatDate(date){
      let year = date.getFullYear()
      let month = date.getMonth() + 1
          month = month < 10 ? ('0' + month) : month
      let day = date.getDate()
          day = day < 10 ? ('0' + day) : day
      return `${year}-${month}-${day}`
    },
    chooseMonthType(type){
      let startDate = getSystemDate()
      let endDate = getSystemDate()
      if(type === 1){
        let now = getSystemDate(); // 获取当前日期时间
        startDate = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
        endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);

      }else{
        let nowdays = getSystemDate();
        let year = nowdays.getFullYear();
        let month = nowdays.getMonth();
        if (month === 0) {
          year = year - 1;
          month = 11; // 12月的前一个月是11月
        } else {
          month = month - 1;
        }


        startDate = new Date(year,month,1,0,0,0);
        endDate = new Date(nowdays.getFullYear(),nowdays.getMonth(),1,0,0,0);
        endDate.setTime(endDate.getTime() - 3600 * 1000 * 24);
      }
      const start = this.formatDate(startDate)
      const end = this.formatDate(endDate)
      this.times = [start,end]
      this.monthType = type;
      this.dayType = -1
    }
  },
}
</script>

<style scoped>

</style>
